<template>
	<view class="detail" :class="[{'overflow':subscribeFlag}]">
		<view class="swiper_container">
			<view class="back">
				<view class="icons" @click.stop="back">
					<uni-icons type="back" color="#fff" size="32"></uni-icons>
				</view>
			</view>
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper_item" v-for="(item,index) in data.images" :key="index">
					<image class="swiper_image" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="comment">
			 <view class="head">
			 	<view class="name">
					<view class="left">
						<view class="xing">
							{{data.name}}
						</view>
						<view class="guanzhu">
							<view class="right" v-if="data.is_collect == 0" @click="collection">
								+ 关注
							</view>
							<view class="right followed" v-else @click="collection">
								已关注
							</view>
						</view>
					</view>
					<view class="rightt" @click="goVisa">
						<image src="/static/images/health.png" mode=""></image>
						<text v-if="data.shop">{{data.shop.abbr}}</text>
					</view>
			 	</view>
				<view class="Introduction">
					{{data.detail}}
				</view>
			 </view>
			 <!-- 服务详情 -->
			 <view class="sever_detail">
			 	<view class="fenshu">
			 		<view class="num">
			 			{{data.score}}
			 		</view>
					<view class="title">
						好评度
					</view>
			 	</view>
				<view class="fenshu">
					<view class="num">
						{{data.sales}}
						<view class="tips">
							次
						</view>
					</view>
					<view class="title">
						服务次数
					</view>
				</view>
				<view class="fenshu">
					<view class="num">
						{{data.collects}}
						<view class="tips">
							个
						</view>
					</view>
					<view class="title">
						关注数
					</view>
				</view>
			 </view>
				<!-- 资质 -->
				<view class="aptitude">
					<view class="">
						<image src="/static/images/technician/security.png" mode=""></image>
						<text>实名认证</text>
					</view>
					<view class="">
						<image src="/static/images/technician/refund.png" mode=""></image>
						<text>爽约包退</text>
					</view>
					<view class="">
						<image src="/static/images/technician/certificate.png" mode=""></image>
						<text>资质证书</text>
					</view>
				</view>
				<!-- 评论列表 -->
				<view class="comment_list" :class="{'no_item':commentList.length == 0}">
					<view class="comment_container">
						<view class="title">
							<text>最新评论</text>
						</view>
						<view class="comment_list_item" v-for="(item,index) in commentList" :key="index">
							<view class="user_detail">
								<view class="user_name">
									<text>{{item.nickname}}</text>
									<uni-rate allow-half :value="data.score" size="14" color="#999" active-color="#fa3733" :readonly="true" :is-fill="false" />
								</view>
								<view class="comment_time">
									{{item.create_time}}
								</view>
							</view>
							<view class="comment_text">{{item.comment_text}}</view>
							<view class="comment_label">
								<view class="label_item" v-for="(item,index) in item.tags" :key="index">
									{{item}}
								</view>
							</view>
						</view>
						<view class="no_comment" v-if="commentList.length == 0">暂无评论</view>
					</view>
				</view>
		</view>
		<!-- 预约项目 -->
		<view class="project_list" v-show="subscribeFlag">
			<view class="project_list_item" v-for="(item,index) in projectList" :key="index">
				<view class="image">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="project_content">
					<view class="project_detail">
						<view class="title">{{item.name}}</view>
						<!-- <view class="detail">{{item.detail}}</view> -->
						<view class="content">
							<view class="price">￥<text>{{item.price}}</text></view>
							<view class="time">
								<view class="time_image">
									<image src="/static/images/time.png" mode=""></image>
								</view>
								<text>{{item.duration}}分钟</text>
							</view>
						</view>
					</view>
					<view class="project_num">
						<uni-icons type="minus" size="30" style="color: #0DAB57;" @click="changeNum(index,1)"></uni-icons>
						<text style="flex: 1;text-align: center;margin: 0 7px;">{{item.projecNum}}</text>
						<uni-icons type="plus-filled" size="30" style="color: #00AC50;" @click="changeNum(index,2)"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 遮罩 -->
		<view class="mask" v-show="subscribeFlag"  @click="subscribeFlag = !subscribeFlag">
			
		</view>
		<view class="submit" v-show="!subscribeFlag">
			<view class="submit_button" @click.stop="appointment">
				立即预约
			</view>
		</view>
		<view class="submit_order" v-show="subscribeFlag">
			<view class="all_price">合计： <text>¥{{allPrice.toFixed(2)}}</text> </view>
			<view class="submit_button" @click="goOrderPay">提交订单</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from "weixin-js-sdk"
	// #endif
	export default {
		data() {
			return {
				data:{},			//技师信息
				projectList:[],		//服务项目
				commentList:[],		//评论列表
				subscribeFlag:false,
				page:1,
				limit:10,
				commentPage:1,
				commentLimit:10,
				score:{},
				tag:[],
				iosUrl:''
			};
		},
		computed:{
			allPrice(){
				var price = 0
				this.projectList.forEach((item,index)=>{
					if(item.num != 0){
						price +=  Number(item.projecNum) * Number(item.price)
					}
				})
				return price
			}
		},
		onLaunch() {
			// #ifdef H5
			this.iosUrl = window.location.href.split("#")[0]
			// #endif
		},
		onLoad(options) {
			let id = uni.getStorageSync('technician_id')
			if(options.id){
				this.getTechnicianDetail(options.id)
				let share_url = window.location.href;
				console.log(share_url,'--------------------share_url')
				uni.setStorageSync('share_url',share_url)
			}else{
				this.getTechnicianDetail(id)
			}
			
			
		},
		methods:{
			//分享
			share(){
				if(uni.getSystemInfoSync().platform == 'android'){
					let url = window.location.href.split("#")[0]
				}else{
					let url = this.iosUrl
				}
				// #ifdef H5
				let url = window.location.href.split("#")[0]
				// #endif
				this.$http({
					url:'/api/wechat/share?url='+url,
					method:'get',
					success:result=>{
						console.log(result,'-------------------------分享')
						let data = result.data.info;
						let that = this;
						// #ifdef H5
						wx.config({
						    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						    appId: data.appId, // 必填，公众号的唯一标识
						    timestamp: data.timestamp, // 必填，生成签名的时间戳<?= $data['timestamp']?>
						    nonceStr: data.nonceStr, // 必填，生成签名的随机串<?= $data['noncestr']?>
						    signature: (data.signature).toLowerCase(), // 必填，签名<?= $data['signature']?>
						    jsApiList:data.jsApiList // 这里先声明我们要用到打开地图的JS接口
						});
						wx.ready(function(){			
							//分享朋友
							wx.updateAppMessageShareData({
								title:"上门推拿就到你悦到家找"+that.data.name, // 分享时的标题 
								desc:that.data.detail,
								link: url, // 分享时的链接
								imgUrl:that.data.images.length >= 0 ? that.data.images[0]:'',// 分享时的图标
								success: function() {
									console.log("分享成功");
								}
							});
							//分享朋友圈
							wx.updateTimelineShareData({ 
							    title:"上门推拿就到你悦到家找"+that.data.name, // 分享标题
							    link:url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
							    imgUrl:that.data.images.length >= 0 ? that.data.images[0]:'', // 分享图标
							    success: function () {
							      // 设置成功
							    },
							})
						})
						// #endif
					}
				})
				
			},
			goVisa(){
				uni.navigateTo({
					url:'/pages/technician/visa/visa'
				})
			},
			//回退
			back(){
				uni.navigateBack()
			},
			//获取技师详情
			getTechnicianDetail(id){
				let that = this;
				this.$http({
					url:`/api/technician/info/${id}`,
					method:'get',
					success:result=>{
						console.log(result,'-----------------技师详情')
						let data = result.data.info
						if(data.images == null) data.images= []
						data.images.unshift(data.cover)
						that.data = data
						this.getProject()
						this.getComments()
						// this.getEvaluation()
						this.getCommentsTag()
						this.share()
					}
				})
			},
			//获取服务列表
			getProject(){
				this.$http({
					url:`/api/product/list?page=${this.page}&limit=${this.limit}&technician_id=${this.data.id}`,
					method:'get',
					success:result=>{
						let data = result.data.list
						data.forEach((item,index)=>{
							item.projecNum = 0   //每条数据添加数量字段  sales：销量    projecNum：当前服务项目的数量
						})
						this.projectList =  data
						console.log(this.projectList,'-------------服务列表')
					}
				})
			},
			//获取评论列表
			getComments(){
				this.$http({
					url:`/api/technician/comment/list/${this.data.id}?page=${this.commentPage}&limit=${this.commentLimit}`,
					method:'get',
					success:result=>{
						console.log(result,'-------------------评论列表')
						result.data.list.forEach((item,index)=>{
							if(index == 0){
								item.tags = ['服务热情','手法熟练','态度很好','性价比高']
							}
						})
						this.commentList = result.data.list
					}
				})
			},
			getCommentsTag(){
				//获取评价配置
				this.$http({
					url:'/api/product/order/comment_config',
					method:'get',
					success:result=>{
						console.log(result)
						if(result.code  ==  200){
							var data = result.data
							data.score.forEach((item,index)=>{
								item.value = 3
							})
							this.score = data.score
							console.log(this.score,'-----------------------score')
							console.log(this.tag,'-----------------------tag')
							let tag = []
							data.tag.forEach((item,index)=>{
								tag.push({
									title:item,
									chex:false
								})
							})
							this.tag = tag
						}
					}
				})
			},
			//预约
			appointment(){
				this.subscribeFlag = true
			},
			// 数量修改
			changeNum(index,i){
				if(i == 1){  //1代表减少
					if(this.projectList[index].projecNum > 0){
						this.projectList[index].projecNum--
					}else{
						this.projectList[index].projecNum = 0
					}
				}else{
					this.projectList[index].projecNum++
				}
			},
			//订单支付
			goOrderPay(){
				var arr = this.projectList.filter((el)=>{
					return el.projecNum > 0
				})
				if(arr.length == 0){
					uni.showToast({
						title:'请选择项目',
						icon:'none'
					})
					return false;
				}
				let severTime = "";   //服务时间(显示)  
				let storageTime = ""; //服务时间(调接口用)
				let products = [];
				arr.forEach((item,index)=>{
					products.push({
						product_id:item.id,
						num:item.projecNum
					})
				})
				let data = {
					products,
					technician_id: this.data.id
				}
				let orderDetail = {
					data,
					technician:this.data,
					project:arr
				}
				console.log(orderDetail,'---------------orderDetail')
				console.log(this.data,'---------------this.technician')
				//订单详细信息缓存，等待支付页获取
				uni.setStorageSync('orderDetail',JSON.stringify(orderDetail))
				uni.navigateTo({
					url:`/pages/orders/orderPay/orderPay`
				})
				
				
			},
			//收藏技师
			collection(){
				this.$http({
					url:`/api/technician/collect/${this.data.id}`,
					method:'post',
					success:result=>{
						if(result.code == 200){
							this.getTechnicianDetail(this.data.id)
							uni.showToast({
								title:result.msg,
								icon:"none",
								duration:1500
							})
						}
					}
				})
				
			},
			// 预览图片
			preveImage(data){
				console.log('123')
				data = [data]
				uni.previewImage({
					urls: data,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	/deep/uni-toast {
	z-index: 10000;
	}
	.overflow{
		overflow: hidden;
	}
	.detail{
		width: 100%;
		height: 100%;
		.swiper_container{
			width: 100%;
			height: 418.65px;
			position: relative;
			.back{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9999;
				width: 100%;
				height: 79px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-start;
				.icons{
					padding: 5px 5px;
				}
			}
			.swiper{
				width: 100%;
				height: 100%;
				.swiper_item{
					width: 100%;
					height: 100%;
					.swiper_image{
						width: 100%;
						height: 100%;
						>image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
		}
		.comment{
			flex: 1;
			display: flex;
			flex-direction: column;
			background: #f5f5f5;
			box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
			overflow-x: hidden;
			z-index: 2;
			margin-top: -12.65px;
			margin-bottom: 130upx;
			.sever_detail{
				background-color: #fff;
				padding: 20upx 0; 
				margin: 20upx 24upx;
				margin-bottom: 0;
				border-radius:15upx;
				z-index: 50;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				>.fenshu{
					width: 25%;
					padding: 20upx 0;
					background: #EDF9F3;
					text-align: center;
					border-radius: 15upx;
					>.num{
						display: flex;
						align-items: flex-end;
						justify-content: center;
						color: #1AB56A;
						font-size: 42upx;
						font-weight: bold;
						>.tips{
							margin-left: 5upx;
							font-size: 22upx;
							line-height: 25upx;
							font-weight: normal;
						}
					}
					>.title{
						margin-top: 10upx;
						color: #999;
					}
				}
			}
			.head{
				padding: 20px 18px 18px 25px;
				background-color: #fff;
				margin: 0 24upx;
				border-radius:15upx;
				z-index: 50;
				.name{
					display: flex;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						.xing{
							font-size: 20px;
							font-weight: bold;
							margin-right: 10px;
						}
						.guanzhu{
							margin-left: 10px;
							.right{
								width: 116upx;
								height: 42upx;
								text-align: center;
								line-height: 42upx;
								border: 1px solid #24D576;
								border-radius: 5px;
								color: #24D576;
								font-size: 25upx;
							}
							.followed{
								background-color: #24D576;
								color: #fff;
							}
						}
					}
					.rightt{
						display: flex;
						align-items: center;
						image{
							width: 15px;
							height: 15px;
						}
						text{
							margin-left: 5px;
							color: #acacac;
							font-size: 12px;
						}
					}
				}
				.Introduction{
					font-size: 12px;
					color:#666;
					margin-top: 10px;
				}
			}
			.aptitude{
				height: 66upx;
				line-height: 66upx;
				background-color: #fff;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				margin: 20upx;
				border-radius: 12px;
				image{
					width: 15px;
					height: 15px;
					margin-right: 5px;
				}
				>view{
					display: flex;
					font-size:12px;
					align-items: center;
				}
			}
			.comment_list{
				flex: 1;
				margin: 0 12px;
				background-color: #fff;
				margin-bottom: 80px;
				padding: 0 30upx;
				border-radius: 10px;
				overflow-y: auto;
				.score{
					height: 471upx;
					border-bottom: 1px solid #E2E2E2;
					padding:36upx 0;
					display: flex;
					justify-content: space-evenly;
					>view{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						font-size: 24upx;
						font-weight: 400;
						color:#4B4B4B;
						.score{
							color: #000;
							font-weight: bold;
						}
					}
				}
				.comment_container{
					.title{
						padding: 37upx 0;
						font-weight: bold;
						font-size: 30upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.comment_list_item:last-child{
						border: none;
					}
					.comment_list_item{
						display: flex;
						flex-direction: column;
						border-bottom: 1px solid #eee;
						margin-top: 10px;
						font-size: 12px;
						color: #474747;
						.user_detail{
							display: flex;
							justify-content: space-between;
							.user_name{
								display: flex;
								align-items: center;
								text{
									font-size: 14px;
									margin-right: 5px;
									max-width: 60px;
									text-overflow: ellipsis;
									white-space: nowrap;
									overflow: hidden;
									margin-right: 15px;
								}
								image{
									width: 12px;
									height: 12px;
								}
							}
							.comment_time{
								font-size: 14px;
							}
						}
						.comment_text{
							margin: 5px 0 0 0; 
							font-size: 12px;
						}
						.comment_label{
							display: flex;
							flex-wrap: wrap;
							padding-bottom: 10px;
							.label_item{
								padding: 3px 5px;
								background-color: #eee;
								color: #616161;
								font-size: 12px;
								border-radius: 8upx;
								margin: 8upx 15upx 0 0;
							}
						}
					}
					.no_comment{
						font-size: 16px;
						color: #656565;
						padding-bottom: 35px;
					}
				}
			}
			
		}
		.project_list{
			width: 100%;
			position: fixed;
			bottom: 128upx;
			left: 0;
			padding: 0 12px;
			border-radius: 7px;
			overflow-y: auto;
			overflow-x: hidden;
			z-index: 998;
			background-color: #fff;
			box-sizing: border-box;
			transition: all 2s;
			padding-top: 60upx;
			max-height: 500px;
			.project_list_item{
				height: 81px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
				margin-bottom: 10px;
				// border-radius: 8px;
				padding: 5px 0;
				border-bottom: 1px solid #eee;
				&:last-child{
					border: none;
				}
				.image{
					width: 89px;
					height: 69px;
					padding: 0 10px;
					>image{
						border-radius: 6px;
						width: 100%;
						height: 100%;
					}
				}
				.project_content{
					flex: 1;
					display: flex;
					.project_detail{
						flex: 1;
						display: flex;
						flex-direction: column;
						.title{
							font-size: 18px;
							font-weight: bold;
							color: #2e2e2e;
						}
						.detail{
							font-size: 12px;
						}
						.content{
							display: flex;
							align-items: center;
							margin-top: 10px;
							.price{
								flex: 1;
								font-size: 14px;
								color: #fa3733;
								margin-right: 15px;
								>text{
									font-size: 20px;
								}
							}
							.time{
								// width: 70px;
								display: flex;
								align-items: center;
								font-size: 14px;
								.time_image{
									width: 14px;
									height: 14px;
									>image{
										width: 100%;
										height: 100%;
										margin-bottom: 5px;
									}
								}
								>text{
									margin-left: 5px;
								}
							}
						}
					}
					.project_num{
						width: 75px;
						padding: 0 5px;
						display: flex;
						align-items: center;
						justify-content: space-around;
					}
				}
			}
		}
		.mask{
			width: 100vh;
			height: 100vh;
			position: absolute;
			top:0;
			left: 0;
			background: rgba(0, 0, 0, 0.36);
			z-index: 100;
		}
		.submit{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 130upx;
			background-color: #fff;
			z-index: 9999;
			.submit_button{
				margin: 20upx 40upx;
				background: linear-gradient(90.00deg, #24d572 0%, #23db93 100%);
				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
				border-radius: 14upx;
				padding: 26upx 0;
				text-align: center;
				color: #fff;
				font-size: 36upx;
				font-weight: 700;
			}
		}
		.submit_order{
			width: 100%;
			height: 128upx;
			padding: 5px 0;
			position: fixed;
			bottom: 0;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: var(--window-bottom);
			z-index: 9999;
			.all_price{
				margin-left: 25px;
				font-size: 12px;
				color: #fa3733;
				text{
					font-size: 14px;
					font-weight: bold;
				}
			}
			.submit_button{
				margin-right: 25px;
				width: 160px;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				color: #fff;
				background-color: #24D576;
				border-radius: 5px;
				text-align: center;
			}
		}
		
	}
</style>
